<template>
  <div id="model_list">
    <div class="router_view_header">
      <h1>{{ name }} 列表</h1>
      <el-button type="primary" v-if="canEdit()" @click="handleCreate()">创建新 {{ name }}</el-button>
    </div>
    <el-table stripe :data="beanList">
      <el-table-column v-for="field in fields" :key="field.id" :prop="field.name" :label="field.name"/>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="primary" plain size="small" v-if="canEdit()" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" plain size="small" v-if="canEdit()" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="page"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <error-alert :errorMessage="errorMessage" @ok="errorOk"/>
  </div>
</template>

<script>
import http from '../util/http.js';
import elementTable from '../plugins/element/table.js';
import elementButton from '../plugins/element/button.js';
import elementPagination from '../plugins/element/pagination.js';

import ErrorAlert from "../components/ErrorAlert.vue";

const component = {
  name: "bean_list",
  data() {
    return {
      name: "",
      fields: [],

      total: 0,
      totalPages: 1,
      beanList: [],
      page: 1,

      errorMessage: ""
    };
  },
  created() {
    this.refresh();
    this.$watch(
      () => this.$route.query,
      () => this.refresh()
    );
  },
  methods: {
    refresh () {
      this.name = this.$route.query.name;
      this.$store.commit("setLoading");
      http.get( http.receiveJSON({
        url: "/managed-bean/0/" + this.$route.query.id,
      }) ).then(response => {
        this.name = response.data.content.name;
        this.fields = response.data.content.fields.filter(field => field.showOnTable === 1);
        this.listModels();
      }).catch((ex) => {
        console.error(ex);
        this.$store.commit("unsetLoading");
        this.errorMessage = "查询字段列表出错";
      });
    },
    listModels () {
      this.$store.commit("setLoading");
      http.get( http.receiveJSON({
        url: "/managed-bean/" + this.name,
        params: {
          page: this.page - 1,
          size: 10
        }
      }) ).then(response => {
        if (response.data.code === 'ok') {
          const content = response.data.content;
          this.beanList = content.content;
          this.totalPages = content.totalPages;
          this.total = content.totalElements;
          this.$store.commit("unsetLoading");
        } else {
          this.errorMessage = response.data.msg;
        }
      }).catch((ex) => {
        console.error(ex);
        this.$store.commit("unsetLoading");
        this.errorMessage = "查询 Bean 列表出错";
      });
    },
    canEdit() {
      return this.$store.state.beanPermissions.filter(item =>
          item.permissionType === "OWNER" || item.permissionType === "ADMIN" || item.permissionType === "EDITOR"
      ).some(item => item.bean.id === this.$route.query.id);
    },
    handlePageChange(page) {
      this.page = page;
      this.listModels();
    },
    handleCreate() {
      this.$router.push({
        name: "bean_edit",
        query: {
          id: this.$route.query.id,
          name: this.name
        },
        params: {
          fields: JSON.stringify(this.fields),
          bean: '{"id":null,"status":1}'
        }
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: "bean_edit",
        query: {
          id: this.$route.query.id,
          name: this.name,
          beanId: row.id
        },
        params: {
          fields: JSON.stringify(this.fields),
          bean: JSON.stringify(row)
        }
      });
    },
    handleRemove(row) {
      console.log(row);
    },

    errorOk() {
      this.errorMessage = "";
    }
  },
  components: {
    ErrorAlert
  }
};

elementTable(component);
elementButton(component);
elementPagination(component);

export default component;
</script>
